<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Test For DataU</title>
    <script type="text/javascript" src="/js/jquery-1.11.3.js"></script>
    <link href="/css/globle.css" rel="stylesheet" />
    <script>

    </script>
</head>
<body>

<div th:include="header"></div>
<br>

<h2>Servers</h2>

<div>
    <a href="/server/findByType?typeId=1">生产环境</a>
    <a href="/server/findByType?typeId=2">测试环境</a>
    <a href="/server/findByType?typeId=3">线上环境</a>
</div>


<!-- 消息列表 -->
<div class="box_bd" id="messageList">
    <!-- 循环遍历群聊，显示在此 -->
    <table cellspacing=0 cellpadding=4 id="table-1">
        <tr>
            <th>服务器类别</th>
            <th>ip</th>
            <th>核数</th>
            <th>内存G</th>
            <th>部署项目</th>
            <th>内存占用</th>
            <th>cpu负载(平均/最大)</th>
        </tr>
        <tr th:each="s:${servers}">
            <td th:text="${s.type.name}">服务器类别</td>
            <td th:text="${s.ip}">ip</td>
            <td th:text="${s.core}">核数</td>
            <td th:text="${s.memory}">内存G</td>
            <td>
                <span th:each="p,iterStat:${s.projects}">
                    <span th:text="${p.name}">部署项目</span>
                    <br th:if="!${iterStat.last}"/>
                </span>
            </td>
            <!-- 计算出来的内存占用 -->
            <!--<td style="width: 600px">
                <div th:text="${s.used}"
                      th:style="'width:'+${s.used}*30+'px; float:left; border: 1px solid black; height:20px;background:green;color: white;'"></div>
                <div th:text="${s.memory}-${s.used}"
                      th:style="'width:'+(${s.memory}-${s.used})*30+'px; float:left; border: 1px solid black; height:20px;background:aliceblue;color: black;'"></div>

                <div th:text="${s.used}/${s.memory}*100+'%'" style="float:left;"></div>
            </td>-->
            <!-- 实际的内存占用 -->
            <td style="width: 600px">
                <div
                     th:style="'width:'+(${s.memory}-${s.memoryFree})*30+'px; float:left; border: 1px solid darkgreen; height:20px;background:darkseagreen;color: white;'"></div>
                <div th:text="${s.memoryFree}"
                     th:style="'width:'+${s.memoryFree}*30+'px; float:left; border: 1px solid darkgreen; height:20px;background:aliceblue;color: black;'"></div>
            </td>
            <td th:text="(${s.loadAvg}==0?'--':${s.loadAvg})+' / '+(${s.loadMax}==0?'--':${s.loadMax})">cpu负载</td>
        </tr>
    </table>

</div>

</body>
</html>